<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.v2.jsp" %>
		<style>
		#jquery-table td{cursor:pointer !important;word-break: break-all;word-wrap: break-word;}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		a.check{
			margin-bottom:10px;
		}
		@media (min-width: 768px) and  (max-width: 1200px){
			.backup-text{
				width:100px !important;
			}
		}
		</style>
	</head>
<body  class="no-skin">
<div  class="load_bg" style="display:none;" ></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
<div id="test"></div>
			<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
			
				<h1 id="fu_name">
					
				</h1>
			</div>
	<form id="queryForm" >
	<div class="page-content-area">
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
					<div class="widget-header widget-header-blue widget-header-flat">
						<h4 class="widget-title">选择条件进行查询</h4>

						<div class="widget-toolbar">
							<a href="#" data-action="collapse">
								<i class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

					<div class=" widget-body">
						<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
									<div class="widget-main clearfix" >
										
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">时间:</label>
											<div class="col-sm-8">
												<div class="input-daterange input-group">
													<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control" style="padding-left:0px" name="startTime">
													<span class="input-group-addon" style="width:6px">
														<i class="fa fa-exchange"></i>
													</span>
													<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control" style="padding-left:0px" name="endTime">
												</div>
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" for="getAllList" style="text-align:right;">类别:</label>
											<div class="col-sm-8">
												<select class="form-control" name="getAllList" id="getAllList">
													<option value="0">主栏目</option>
													<option value="1">子栏目</option>
												</select>
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" for="channel" style="text-align:right;">渠道:</label>
											<div class="col-sm-8">
												<input type="text" class="form-control" name="channel" id="channel">
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" for="channel" style="text-align:right;">状态:</label>
											<div class="col-sm-8">
												<s:select id="status" name="status" list="%{statusList}" listKey="key" listValue="value" headerKey="" headerValue="--请选择--" cssClass="form-control">
												</s:select>
											</div>
										</div>
										
							</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col-sm-12 -->
				<div class="col-md-12 center">
				<div class="clearfix form-actions">
				
					<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
						<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						查询
					</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-grey  no-border" type="reset">
						<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
						重置
					</button>
					&nbsp;&nbsp;&nbsp;
					<a class="btn btn-grey  no-border" data-toggle="modal" data-target="#myModal">						
						添加
					</a>
				  </div>
		   </div>
		</div><!-- /.row -->
		
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table" class="table table-striped table-bordered table-hover">
				
				</table>
			</div><!-- /.col -->
		</div><!-- /.row -->
			
	</div><!-- /.page-content-area -->
	</form>
</div><!-- /.page-content -->

<!--模态框-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加渠道</h4>
      </div>
      <div class="modal-body clearfix">
	    <div class="row">
			<div class="form-group col-xs-6">
				<label class="col-sm-4 control-label"  for="channel">栏目类别:</label>
				<div class="input-group col-sm-8">
					<select class="form-control" name="channel-type" id="channel-type">
						<option value="1">主栏目</option>
						<option value="2">子栏目</option>
					</select>
				</div>
			</div>
		</div>	
		<div class="row">
			<div class="form-group col-xs-6">
				<label class="col-sm-4 control-label"  for="channel">栏目名称:</label>
				<div class="input-group col-sm-8">
					<input type="text" class="form-control" name="channel-code" id="channel-code">
				</div>
			</div>
			<div class="form-group col-xs-6 hidden" id="channel-parentid-c">
				<label class="col-sm-4 control-label"  for="channel">栏目所属:</label>
				<div class="input-group col-sm-8">
					<select class="form-control" name="channelParentid" id="channel-parentid">
						
					</select>
				</div>
			</div>
	      </div>	
	      <div class="row">
			<div class="form-group col-xs-6">
				<label class="col-sm-4 control-label"  for="showwz">违章:</label>
				<div class="input-group col-sm-8">
					<select id="showwz" class="form-control">
						<option value="1">显示</option>
						<option value="0" selected>不显示</option>
					</select>
				</div>
			</div>
	      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="addChannel">确认</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--模态框-->
<div class="modal fade" id="myModal-change">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">修改渠道</h4>
      </div>
      <div class="modal-body clearfix">
	    <div class="row">
			<div class="form-group col-xs-12">
				<label class="col-sm-2 control-label"  for="channel">原名称:</label>
				<div class="input-group col-sm-6">
					<input class="form-control" id="channel-oldname" readonly />
				</div>
			</div>
			<div class="form-group col-xs-12">
				<label class="col-sm-2 control-label"  for="channel">新名称:</label>
				<div class="input-group col-sm-6">
					<input class="form-control" id="channel-newname" />
				</div>
			</div>
			<div class="form-group col-xs-12 hidden" id="channel-showwz-c">
				<label class="col-sm-2 control-label"  for="channel-showwz">违章:</label>
				<div class="input-group col-sm-6">
					<select id="channel-showwz" class="form-control">
						<option value="1">显示</option>
						<option value="0">不显示</option>
					</select>
				</div>
			</div>
		</div>			
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="change">确认</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">

//接受URL参数，进行文档写入
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return decodeURI(r[2]); return null;
}

//【查询】按钮Click事件
function query_any(){
	$(".load_bg,.load_img").show();
	if(jqTable != null){
		jqTable.fnDraw();
		
	}else{
		loaddata();
		$("#checkAll").on("change", function () {
			if($("#checkAll").prop("checked")==true){
				$('input[name = "id"]:checkbox').prop("checked", true);
			}
			else{
				$('input[name = "id"]:checkbox').prop("checked", false);
			}
			
		});
		
	}
}
          
var jqTable = null;
var loaddata = function(){
	jQuery(function($) {
		jqTable = $('#jquery-table').dataTable( {
		    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
		    "columnDefs": [
		    	{	  
		    		  "title":'id',
		    	  	  "targets": [0],
					  "data": "id",   //JSON返回属性
		    	  	  "class": "center",
		    	  	  "bSortable": false,
					  "width": "50px"
		    	},
				{	  
		    		  "title":'渠道',
		    	  	  "targets": [1],
					  "data": "channel",   //JSON返回属性
		    	  	  "class": "center",
		    	  	  "bSortable": false,
					  "width": "50px"
		    	},
				{	  
		    		  "title":'状态',
		    	  	  "targets": [2],
					  "data": "status",   //JSON返回属性
		    	  	  "class": "center",
		    	  	  "bSortable": false,
					  "width": "50px",
					  "render": function(value, type, row) { // 返回自定义内容
							switch(value){
								case 0:return "已下线";
								case 1:return "在线";
								default	:return "未知";		
							}								 
					  },
		    	},
		    	{	  
		    		  "title":'违章',
		    	  	  "targets": [3],
					  "data": "showwz",   //JSON返回属性
		    	  	  "class": "center",
		    	  	  "bSortable": false,
					  "width": "50px",
					  "render": function(value, type, row) { // 返回自定义内容
							if(row.parentid > 0){
								return "子栏目无此选项";
							}else{
								if(value == 0){
									return "不显示";
								}else if(value == 1){
									return "显示";
								}else{
									return "未知";
								};
							};
					  },
		    	},
				{	  
		    		  "title":'操作',
		    	  	  "targets": [4],
					  "data": "status",   //JSON返回属性
		    	  	  "class": "center",
		    	  	  "bSortable": false,
					  "width": "50px",
					  "render": function(value, type, row) { // 返回自定义内容
							if(row.parentid == 0){
								return "<a class='btn btn-primary btn-change' data-category='1' data-showwz='"+row.showwz+"' data-id='"+row.id+"' data-name='"+row.channel+"'>修改</a>";
							}else{
								if(value == 0){
									return "<a class='btn btn-success btn-oline btn-online' data-id='"+row.id+"'>上线</a>" +
									       "<a class='btn btn-primary btn-change' data-category='2' data-showwz='"+row.showwz+"' data-id='"+row.id+"' data-name='"+row.channel+"'>修改</a>";
								}else if(value == 1){
									return "<a class='btn btn-danger btn-oline btn-offline' data-id='"+row.id+"'>上线</a>" +
									       "<a class='btn btn-primary btn-change' data-category='2' data-showwz='"+row.showwz+"' data-id='"+row.id+"' data-name='"+row.channel+"'>修改</a>";
								}else{
									return "";
								};
							};
					  },
		    	},
		  	],
			"sAjaxSource": ctx+"/spread/channelListRequest.action",//数据源URL
			"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
		   			var data = $('#queryForm').serializeObject();
					data.aoData = JSON.stringify(aoData);
					$.ajax({
						"type": "POST",
						"dataType": 'json',
						"url": sSource,
						"data":data,
						"success": function(resp){
                            console.log(resp);							
							fnCallback(resp);
							initListPage();
						},
						"error": function(XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
						},
						"complete": function(){
							$(".load_bg,.load_img").hide();
						}
				});
			},
			"sScrollXInner": "100%",
			"sScrollY": "100%",//如果不设置，IE会有问题
		    "aaSorting": [[0,"asc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
		});
	});
};
	
//时间控件
jQuery(function($) {
	$(".date-picker").datepicker({autoclose:true}).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
	
	var channelType = $('#channel-type').val(),
	    channelParentid = 0;
	//选择栏目类别
	$('#channel-type').on('change',function(){
		channelType = $(this).val();
		//选择子栏目时展示"栏目所属"下拉列表,1为添加主栏目,2为添加子栏目
		if(channelType==1){
			channelParentid = 0;
			if(!$('#channel-parentid-c').hasClass('hidden')){
				$('#channel-parentid-c').addClass('hidden');
			};
		}else if(channelType==2){
			$('#channel-parentid-c').removeClass('hidden');
			channelParentid = $('#channel-parentid').val();
		};
	});
	//选择栏目所属
	$('#channel-parentid').on('change',function(){
		channelParentid = $(this).val();
	});
	//添加渠道按钮
	$('#addChannel').on('click',function(){
		var channel = $('#channel-code').val();
		var showwz = $('#showwz').val();
		$.ajax({
			"url": ctx+"/spread/addChannel.action",
			"type": "POST",
			"dataType": 'json',
			"data": {"channel": channel,"channelParentid": channelParentid, "showwz": showwz},
			"beforeSend": function(){
				$(".load_bg,.load_img").show();
			},
			"success": function(data){
				console.log(JSON.stringify(data));
				$('#channel-code').val('');
				$('#myModal').modal('hide');
				if(channelType==1){
					getMainList();
				}else if(channelType==2){
					query_any();
				};
			},
			"error": function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			},
			"complete": function(){
				$(".load_bg,.load_img").hide();
			}
		});	
	});
	//上下线按钮点击
	$('#jquery-table').delegate('.btn-oline','click',function(){
		var id = $(this).attr('data-id');
		if($(this).hasClass('btn-online')){
			oLine($(this),1,id);
		}else{
			oLine($(this),0,id);
		};
	});

	//获取完整的主栏目
	getMainList();

    //修改按钮点击事件
    $('#jquery-table').delegate('.btn-change','click',function(){
		var id = $(this).attr('data-id');
        var name = $(this).attr('data-name');
        var showwz = 0;
        var category = $(this).attr('data-category');
        if(category == 1){
        	if($('#channel-showwz-c').hasClass('hidden')){
        		//显示选择违章
        		$('#channel-showwz-c').removeClass('hidden');
        	};
        	showwz = $(this).attr('data-showwz');
        }else{
        	if(!$('#channel-showwz-c').hasClass('hidden')){
        		//显示选择违章
        		$('#channel-showwz-c').addClass('hidden');
        	};
        };
        var top = $(this).position().top;
        var modalHei = $('#myModal-change').height();
        $('#channel-oldname').val(name);
        $('#change').attr('data-id', id);
        $('#channel-showwz option[value=' + showwz + ']').prop('selected', true);
		$('#myModal-change').css('top',top - 200).modal('show');
	});

	$('#change').on('click',function(){
		var id = $(this).attr('data-id');
        var newName = $('#channel-newname').val();
        var showwz = $('#channel-showwz').val();
        if(newName != '' && newName != null){
        	$.ajax({
				"type": "POST",
				"dataType": 'json',
				"url": ctx+"/spread/changeProperty.action",
				"data": {"id": id, "name": newName, "showwz": showwz},
				"success": function(resp){
					$('#myModal-change').modal('hide');	
					query_any();	
				},
				"error": function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
        }else{
        	$('#channel-newname').focus();
        }
	});

	
});

function getMainList(){
	//用jqtable的接口获取一个完整的主栏目
	$.ajax({
		"type": "POST",
		"dataType": 'json',
		"url": ctx+"/spread/channelListRequest.action?getMainList=1&parentid=0",
		"success": function(resp){
			var option = '';
			$.each(resp.aaData, function(index,item){
				option += '<option value='+item.id+'>'+item.channel+'</option>';
			});	
			$('#channel-parentid').html(option);
            channelParentid = $('#channel-parentid').val();;		
		},
		"error": function(XMLHttpRequest, textStatus, errorThrown) {
			alert(textStatus);
		}
	});
}

function oLine(dom,type,id){
	var url;
	//1为上线,0为下线
	if(type==1){
		url = ctx+"/spread/oLine.action?type=1";
	}else if(type==0){
		url = ctx+"/spread/oLine.action?type=0";
	};
	$.ajax({
			"type": "POST",
			"dataType": 'json',
			"url": url,
			"data": {"id": id},
			"beforeSend": function(){
				dom.addClass('btn-grey');
			},
			"success": function(resp){
				console.log(resp);
                if(type==1){
					dom.removeClass('btn-success btn-online').addClass('btn-danger  btn-offline').text('下线');
				}else if(type==0){
					dom.removeClass('btn-danger btn-offline').addClass('btn-success btn-online').text('上线');
				};			
			},
			"error": function(XMLHttpRequest, textStatus, errorThrown) {
				alert(textStatus);
			},
			"complete": function(){
				dom.removeClass('btn-grey');
			}
	});
}

</script>
		
</body>
</html>